<template>
     <div class="boom">
         <!-- 二级baobao -->
            <div class="top">

            </div>
            <div class="list">
                <div class="title">
                      <span @click="doing()">正在抢购</span>
                      <span @click="done()">上新预告</span>

                </div>
                <div class="foot">
            <div v-for="(item,index) in list" :key="index" class="block">

                <div class="picture"><img :src="item.picture" alt=""></div>
                <div class="right">
                    
                    <div> <div class="name">{{item.name}}</div><div class="jia">爆爆团价</div>
                    <div class="two">￥{{item.min_price}}</div></div>
                   
                    <div class="right_right">   <button @click="changeclick(item,index)">{{item.buy?"已抢":"马上抢"}}</button>
                    <div class="month">已售{{item.month_saled}}份</div></div>
                 
                </div>
            </div>

        </div>
               
            </div>
     </div>
</template>

<script>
import {tuan_list} from '../../../utils/api'
export default {
      data(){
          return{
              list1:[],
              list:[],
              Arr:[]
          }
      },
      mounted(){
        tuan_list({status:0}).then((res)=>{
            this.list = res.data.list;
            this.list.forEach((item)=>{
                this.$set(item,'buy',false)
            })
            console.log(res)
        })
        tuan_list({status:0}).then((res)=>{
            this.list1 = res.data.list;
            this.list.forEach((item)=>{
                this.$set(item,'buy',false)
            })
            console.log(res)
        })

        tuan_list({status:1}).then((res)=>{
            this.Arr = res.data.list;
            this.list.forEach((item)=>{
                this.$set(item,'buy',false)
            })
            console.log(res)
        })
     },
     methods:{
        changeclick(item,index){
            //   item.msq = true
              item.buy = ! item.buy
        },
        doing(){
            //  this.list(0) = this.Arr
            this.list = this.list1
        },
        done(){
            // this.status=1
            // this.list(1)= this.Arr
            this.list = this.Arr
        }
      }
}
</script>

<style lang="scss" scoped>
       *{
    margin: 0;
    padding: 0;
}
    .top{
        width: 100%;
        height: 150px;
        background-image: url(../../../top.png);
        background-size:374px 150px ;
       margin: auto;
    }

    .title span{
       display: inline-block;
       padding: 10px ;
       padding-left: 20px;
       color: red;
   }

   .block{
        
       width: 100%;
       height: 100px ;
       display: flex;
    
       margin-bottom: 20px;
    //    justify-content: space-between;
   }
   .block img{
       width: 120px;
          padding: 10px ;
   }

   .right{
       /* padding-left: 30px; */
       margin-left: 10px;
       display: flex;
       width: 50%;
       justify-content: space-between;
     
       .right_right{
           margin-top: 25px;
       }
       .name{
           font-weight: 800;
           
       }
       .month{
           font-size: 13px;
       }
       .jia{
        margin-top: 10px;
           font-size: 13px;
           color: red;
       }
   }

   .foot button{
       background-color: rgb(188, 12, 12);
       width: 60px;
       height: 30px;
       color: aliceblue;
       font-weight: 800;
       border-radius: 10px;
    //    margin-top: 30px;
    //    margin-left: 60px;
   }
.right .two{
    display: inline-block;
    /* margin-left: 0px; */
    color: red;
    font-weight: 800;
    // margin-top: 10px;
    
}
 
</style>